In the Wild

During lessons, students would frequently ask questions about accessibility issues they encountered on websites. This experience led me to care deeply about digital accessibility. I wanted to be able to answer these questions and do a better job of teaching students to advocate for access and inclusion. I completed courses including The Complete Web Development Bootcamp by Angela Yu with Udemy and the Web Accessibility Curriculum from Deque University. I applied my knowledge by examining the websites my students needed to use for accessibility and providing feedback to my school district and vendors. When students asked why a site wasn't accessible, I could explain why, and more importantly, demonstrate advocacy for change. See real examples below.

Hidden Input Code Example

          
<div class="perseus-widget-container">
  <label class="perseus-input-with-label" aria-hidden="true">
   <span class="perseus-input-label">Answer:</span>
     <div> 
        <input aria-described-by="input-with-examples" type="text" aria-label="Your answer:">
      </div>
  </div>

This example comes from a popular SAT preparation course. The input above is invisible to screen readers because the label it is nested in is coded as aria-hidden="true". It seems as though the developer's intent was to have the input described by another element, since aria-described-by points to another element on the page (not shown in this example). However, this does not happen in practice because of the application of aria-hidden="true". The input is effectively hidden from screen reader users.

Missing Name Example

        
          <button class="helpdesk-button btn" id="help-popover" role="button" onclick="event.preventDefault();" data-toggle="popover" data-original-title="" title=""><span class="glyphicon glyphicon-question-sign"></span></button>

In this example, a button used to open a help menu does not have alternative text. Users with vision can see a question mark on the button, indicating that it could answer questions or provide information. However, since the active image does not have an equivalent text description, screen reader users do not know what purpose the button serves.